<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>发布文章</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.title" ></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <VueEditor v-model="form.content" 
          useCustomImageHandler @image-added="handleImageAdded" />
        </el-form-item>
        <el-form-item label="栏目">
          <el-checkbox-group v-model="form.categories">
            <el-checkbox
              v-for="item in categoryList"
              :key="item.id"
              :label="item.id"
            >{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            :file-list="form.cover"
            :on-remove="removefile"
            :on-success="sendfile"
            :action="$http.defaults.baseURL+'/upload'"
            :headers="headerImg"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form.type">
            <el-radio v-model="form.type" :label="1">文章</el-radio>
            <el-radio v-model="form.type" :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="publish">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      form: {
        title: '',
        content: '',
        categories: [],
        cover: [],
        type: 1
      },
      formRef: [],
      headerImg: {
        Authorization: 'Bearer ' + window.localStorage.getItem('token')
      },
      categoryList: []
    }
  },
  created() {
    this.getcategory()
    console.log(this.$route.query.id)
    if(this.$route.query.id){
      this.getData()
    }
  },
  methods: {
    // 富文本编辑器
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      const newData = new FormData()
      newData.append('file', file)
      this.$http.post('upload', newData).then(res => {
        //在当前位置插入图片
        Editor.insertEmbed(
          cursorLocation,
          'image',
          'http://127.0.0.1:3000' + res.data.data.url
        )
        // 重置一下数据
        resetUploader()
      })
      //
    },
    async getcategory() {
      const { data: res } = await this.$http.get('/category')
      console.log(res)
      const newData = res.data.filter(x => {
        return x.id !== 0 && x.id !== 999
      })
      this.categoryList = newData
    },
    //上传图片成功
    sendfile(res, file, fileList) {
      // 把id给当前这个图片的信息
      file.id = res.data.id
      this.form.cover.push(file)
      console.log('上传图片成功')
    },
    //删除图片
    removefile(file, fileList) {
      this.form.cover = fileList
      console.log('删除图片成功')
    },
    // 发布文章
    async publish() {
      // console.log(this.form.cover)
      const newCover = this.form.cover.map(x => {
        return {
          id: x.id
        }
      })
      this.form.categories = this.form.categories.map(x=>{
        return {id:x}
      })
      //发布之前做文章数据处理
      const { data: res } = await this.$http.post('/post', this.form)
      console.log(res)
      //清空数据
      this.form={
        title: '',
        content: '',
        categories: [],
        cover: [],
        type: 1
      }
    },
    //数据回显
    getData(){
      this.$http({
        url:'/post/'+this.$route.query.id
      }).then(res=>{
        console.log(res.data.data)
        const categories = res.data.data.categories.map(x=>{
          return x.id
        })
        res.data.data.content=res.data.data.content.replace(/div/g,'p')
        // 返回来的图片url做处理
        const reg = /^http/;
        res.data.data.cover.forEach(x=>{
          if(!reg.test(x.url)){
            x.url = 'http://127.0.0.1:3000'+x.url
          }
        })
        this.form = res.data.data
        this.form.categories = categories
      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-card {
  padding-right: 50px;
}
</style>